<template>
  <div>
    <el-form :model="queryForm" inline>
      <el-form-item label="客户名称">
        <el-input v-model="queryForm.customer" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="服务类型">
        <el-select v-model="queryForm.serveType" placeholder="请选择服务类型" clearable style="width: 240px">
          <el-option label="咨询" value="6"/>
          <el-option label="投诉" value="7"/>
          <el-option label="建议" value="8"/>
        </el-select>
      </el-form-item>
      <el-form-item label="查询范围">
        <el-select v-model="queryForm.curr" placeholder="请选择查询范围" clearable style="width: 240px">
          <el-option label="查看全部" value="0"/>
          <el-option label="只看我的" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;height:520px"
    :cell-style="{'text-align':'center'}"
    :header-cell-style="{'text-align':'center'}">
      <el-table-column label="序号">
        <template #default="scope">
          {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="serveType" label="服务类型"></el-table-column>     
      <el-table-column prop="overview" label="概要" width="150"></el-table-column>
      <el-table-column prop="customer" label="客户"></el-table-column>
      <el-table-column prop="state" label="服务状态"></el-table-column>
      <el-table-column prop="serviceRequest" label="服务请求"></el-table-column>
      <el-table-column prop="createPeople" label="服务创建人" width="95"></el-table-column>
      <el-table-column prop="assigner" label="服务分配人" width="95"></el-table-column>
      <el-table-column prop="assignTime" label="分配时间"></el-table-column>
      <el-table-column prop="serviceProce" label="服务处理"></el-table-column>
      <el-table-column prop="serviceProcePeople" label="服务处理人" width="95"></el-table-column> 
      <el-table-column prop="serviceProceTime" label="处理时间" ></el-table-column>
      <el-table-column prop="serviceProceResult" label="处理结果"></el-table-column>
      <el-table-column prop="myd" label="满意度"></el-table-column>
      <el-table-column prop="isValid" label="是否有效"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>      
      <el-table-column prop="updateDate" label="修改时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">
            <el-icon>
              <Delete/>
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>
  </div>
</template>


<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination} from 'element-plus';
import {Edit, Delete} from '@element-plus/icons-vue';
import axios from "axios";

axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

// 查询表单数据
const queryForm = reactive({
  customer: '',
  serveType: '',
  state: 3,
  curr: '',
});

// 表格数据
const tableData = ref([]);

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 模拟获取数据的函数
const fetchData = async (queryForm) => {

  console.log("查询,参数为：{}",queryForm);
  let params = {};
  if (!queryForm.curr){
    params = {
      customer: queryForm.customer,
      serveType: queryForm.serveType,
      state: queryForm.state,
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
    };
  } else {
    params = {
      customer: queryForm.customer,
      serveType: queryForm.serveType,
      state: queryForm.state,
      curr: queryForm.curr,
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
    };
  } 
  const result = await axios.get("/api/customerServe/page",{params});
  console.log(result.data);
  if (result.data.code) {
    tableData.value = result.data.data.records;
    pagination.total = result.data.data.total;
  }
};

// 查询
const handleSearch = () => {
  fetchData(queryForm);
};

// 分页大小改变
const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  fetchData(queryForm);
};

// 当前页改变
const handleCurrentChange = (newPage) => {
  pagination.currentPage = newPage;
  console.log("当前页改变:{}", pagination.currentPage);
  fetchData(queryForm);
};

// 编辑
const handleEdit = (row) => {
  // 实现编辑逻辑
  console.log('编辑', row);
};

// 删除
const handleDelete = (row) => {
  // 实现删除逻辑
  console.log('删除', row);

  this.$confirm('确认删除？','系统提示',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    cancelButtonClass:'btn-custom-cancel',
    type:'warning'
  }).then(function(){
    axios.delete('/api/customerServe/'+ row.id).then(res=>{
      if(res.data.code === '1'){
        msg("success","删除成功");
        onMounted();
      }else{
        msg("error", res.data.message);
      }
    })
  })
};

// 初始化数据
onMounted(() => {
  fetchData(queryForm);
});
</script>

<style scoped>
</style>